<template>
    <div class="box">
        <div class="userTalk">
            用户评论
        </div>

        <div class="ulList">
            <ul>
                <li class="li1" v-for="item, index in commentsList" :key="item.uid">
                    <div class="boxImg">
                        <img :src="item.toux" alt="">
                    </div>

                    <div class="boxMsg">
                        <span class="sp1">{{ item.username }}<span class="sp2">{{ item.CommenTime }}</span></span>
                        <van-rate v-model="item.value" readonly allow-half :size="10" color="rgba(253, 178, 70, 1)" />
                        <span class="sp3">{{ item.comment }}</span>
                    </div>

                </li>

                <li class="li2" v-if="!commentImgs">
                    <img :src="commentImgs[0]" alt="" class="img1">
                    <img :src="commentImgs[1]" alt="" class="img2">
                    <img :src="commentImgs[2]" alt="" class="img3">
                </li>

                <li class="li3" v-if="!commentsList">
                    <span class="sp4">查看1314159评论</span><span class="iconfont icon-xiangyou"></span>
                </li>
                <li class="li4" v-else>
                    <span class="sp5">暂无评论</span>
                </li>
                <li class="li5">
                    <span class="sp6">有什么问题，问问去过的人吧</span><span class="iconfont icon-xiangyou"></span>
                </li>

            </ul>

        </div>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserComments } from '@/api/api'
import { showToast } from 'vant';
const commentsList = ref([])
const commentImgs = ref([])
onMounted(async () => {
    //获取id
    let uid = localStorage.getItem('uId')
    let { data } = await getUserComments({ id: uid })

    if (data.length !== 0) {
        commentsList.value = data
        let { img1, img2, img3 } = data[1]
        commentImgs.value.push(img1, img2, img3)
    } else {
        showToast({
            message: '暂无数据'
        })
    }




})
const value = ref(4);
</script>

<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.box {
    .userTalk {
        color: rgba(56, 56, 56, 1);
        font-size: 28px;
        line-height: 45px;
        font-weight: bold;
        padding: 38px 0 0 32px;
        border-bottom: 1px solid rgb(243, 243, 243);
    }

    .ulList {
        ul {
            .li1 {
                display: flex;
                border-bottom: 1px solid rgb(243, 243, 243);

                .boxImg {
                    img {
                        width: 100px;
                        height: 100px;
                        padding: 21px 28px 59px 32px;
                    }
                }

                .boxMsg {
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    .sp1 {
                        display: inline-block;
                        font-size: 28px;
                        display: flex;
                        padding: 21px 0 5px 0;
                        width: 100%;
                        justify-content: space-between;

                        .sp2 {
                            display: inline-block;
                            // padding-left: 222px;
                            line-height: 33px;
                            font-size: 22px;
                            margin-right: 32px;
                        }
                    }

                    .sp3 {
                        padding-right: 54px;
                        font-size: 22px;
                        padding-top: 35px;
                        line-height: 35px;
                    }

                    .text1 {
                        width: 506px;
                        color: rgba(56, 56, 56, 1);
                        font-size: 22px;
                        padding-top: 25px;
                        line-height: 33px;
                    }

                }
            }

            .li2 {
                width: 100%;
                display: flex;
                border-bottom: 1px solid #ccc;

                img {
                    width: 100px;
                    height: 100px;
                    padding: 18px 10px 62px 0;
                }

                .img1 {
                    padding-left: 160px;
                }
            }

            .li3 {
                width: 100%;
                color: rgba(166, 166, 166, 1);
                font-size: 14px;
                border-bottom: 1px solid #ccc;
                display: flex;
                align-items: center;
                justify-content: space-between;


                .sp4 {
                    // display: inline-block;
                    line-height: 98px;
                    margin-left: 248px;
                }

            }

            .li4 {
                width: 100%;
                color: rgba(166, 166, 166, 1);
                font-size: 14px;
                border-bottom: 1px solid #ccc;
                display: flex;
                align-items: center;
                justify-content: center;

                .sp5 {
                    line-height: 98px;

                }
            }

            .icon-xiangyou {
                margin-right: 32px;
            }

            .li5 {
                color: rgba(56, 56, 56, 1);
                font-size: 28px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #ccc;

                .sp6 {
                    font-size: 28px;
                    line-height: 98px;
                    margin-left: 32px;

                }
            }
        }
    }
}
</style>
